<template>
  <div class="schedule">
    <div class="card schedule__search-bar">
      <el-form inline>
        <el-form-item label="预约时间：">
          <el-date-picker
            v-model="params.time"
            placeholder="选择日期"
            type="date"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item label="会议室：">
          <el-input v-model="params.name" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleReset">重置</el-button>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="card">
      <template v-if="list.length">
        <ScheduleList
          v-loading="loading"
          :schedule-list="list"
          :date="params.time"
          @viewDetail="handleViewMeetingDetail"
          @reserve="handleReserve"
        />

        <div class="schedule__page">
          <Pagination
            style="margin-top: 0; padding-bottom: 0;"
            :total="total"
            :page="params.page"
            :limit="params.paginate"
            @pagination="pagination"
          />
        </div>
      </template>

      <div v-if="!loading && list.length <= 0" class="flex-col flex-center">
        <el-empty description="当前暂无预约信息" />

        <div class="btn-group">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-date"
            @click="handleReserve(null)"
          >
            立即预约
          </el-button>

          <el-button
            size="mini"
            icon="el-icon-date"
            @click="handleViewBord"
          >
            预约看板查看
          </el-button>
        </div>
      </div>
    </div>

    <ReserveDetailDrawer
      :visible.sync="showReserveDetailDialogVisible"
      :record-id="currentRecord"
    />

    <CreateReserveDialog
      :visible.sync="createReserveDialogVisible"
      :default-room="currentMeetingRoom"
    />
  </div>
</template>
<script>
import { getScheduleList } from '@/api/conferenceRoom'
import ReserveDetailDrawer from '@/views/conferenceRoomAppointment/components/reserveList/ReserveDetailDrawer.vue'
import CreateReserveDialog from '@/views/conferenceRoomAppointment/components/CreateReserveDialog.vue'
import Pagination from '@/components/Pagination/index.vue'
import ScheduleList from '@/views/conferenceRoomAppointment/components/schedule/ScheduleList.vue'
import { getVehicleScheduleList } from '@/api/vehicleService'

export default {
  name: '',
  components: {
    ScheduleList,
    Pagination,
    CreateReserveDialog,
    ReserveDetailDrawer
  },
  data() {
    return {
      params: {
        page: 1,
        paginate: 10,
        name: null,
        time: ''
      },
      list: [],
      total: 0,
      currentRecord: null,
      showReserveDetailDialogVisible: false,
      createReserveDialogVisible: false,
      currentMeetingRoom: null,
      loading: false
    }
  },
  computed: {
  },
  created() {
    this.getScheduleList()
  },
  methods: {

    async getScheduleList() {
      this.loading = true
      try {
        const res = await getScheduleList({
          ...this.params,
          riqi: this.params.time
        })
        this.list = res.data.data
        this.total = res.data.total
        console.log('res --------->', res)
      } catch (error) {
        this.$message.error('预约信息获取失败')
      } finally {
        this.loading = false
      }
    },

    handleSearch() {
      this.getScheduleList()
    },

    handleReset() {
      this.params = this.$options.data().params
      this.getScheduleList()
    },

    handleViewMeetingDetail(id) {
      this.currentRecord = id
      this.showReserveDetailDialogVisible = true
    },

    handleReserve(id) {
      this.currentMeetingRoom = id
      this.createReserveDialogVisible = true
    },

    pagination(page) {
      this.params.page = page.page
      this.params.paginate = page.limit
      this.getScheduleList()
    },

    handleViewBord() {
      this.$router.push({
        name: 'weeklyView'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.schedule {
  padding: 20px;

  &__search-bar {
    ::v-deep(.el-form-item) {
      margin-bottom: 0;
      margin-right: 20px;
      .el-form-item__label {
        font-weight: 400;
      }
    }
  }

  .btn-group {
    margin-bottom: 20px;
  }

  &__page {
    display: flex;
    justify-content: flex-end;
  }

}
</style>
